/*--------------------------------------------------
    [Divider]
----------------------------------------------------*/

%divider {
    position: relative;
    width: 100%;
    @include font($size: $font-size-18);
    text-align: center;
    text-transform: uppercase;
    overflow: hidden;
    margin: 30px auto;

    %divider-element {
        position: relative;
        display: inline-block;

        &:before,
        &:after {
            @include position(absolute, $top: 50%);
            display: block;
            @include size(2000px, 0);
            border-top-style: solid;
            border-top-width: 1px;
            border-color: lighten($color-grey, 15%);
            content: " ";
        }

        &:before {
            right: 100%;
            margin-right: 15px;
        }

        &:after {
            left: 100%;
            margin-left: 15px;
        }
    }

    %divider-element-bg {
        @include font($size: $font-size-14);
        color: $color-white;
        background: $color-base;
        padding: 3px 10px;
    }

    %divider-icon {
        @include font($size: $font-size-30);
        color: $color-base;
    }
}


/*--------------------------------------------------
    [Divider v1]
----------------------------------------------------*/

// .divider-v1 {
//     @extend %divider;

//     .divider-v1-element {
//         @extend %divider-element;
//     }

//     .divider-v1-element-bg {
//         @extend %divider-element-bg;
//     }

//     .divider-v1-icon {
//         @extend %divider-icon;
//     }
// }


/*--------------------------------------------------
    [Divider v2]
----------------------------------------------------*/

.divider-v2 {
    @extend %divider;

    .divider-v2-element {
        @extend %divider-element;

        &:before,
        &:after {
            border-top-style: dashed;
            border-top-width: 1px;
        }
    }

    .divider-v2-element-bg {
        @extend %divider-element-bg;
    }

    .divider-v2-icon {
        @extend %divider-icon;
    }
}


/*--------------------------------------------------
    [Divider v3]
----------------------------------------------------*/

// .divider-v3 {
//     @extend %divider;

//     .divider-v3-element {
//         @extend %divider-element;

//         &:before,
//         &:after {
//             border-top-style: double;
//             border-top-width: 3px;
//         }
//     }

//     .divider-v3-element-bg {
//         @extend %divider-element-bg;
//     }

//     .divider-v3-icon {
//         @extend %divider-icon;
//     }
// }


// /*------------------------------------------------------------------
//     [Divider v4]
// ------------------------------------------------------------------*/

// .divider-v4 {
//     .divider-v4-title {
//         position: relative;
//         font-size: $font-size-22;
//         margin: 0 0 30px;
//     }
// }

// /* Divider Center V4 */
// .divider-v4 {
//     &.divider-v4-center-single,
//     &.divider-v4-center-double {
//         .divider-v4-title {
//             &:after {
//                 @include position(absolute, $bottom: -10px, $left: 50%);
//                 @include size(15%, 1px);
//                 margin-left: -9%;
//             }

//             &:after,
//             &:before {
//                 background: $color-dark;
//                 content: " ";
//             }
//         }
//     }
// }

// /* White Divider Center V4 */
// .divider-v4-white {
//     &.divider-v4-center-single,
//     &.divider-v4-center-double {
//         .divider-v4-title {
//             &:before,
//             &:after {
//                 background: $color-white;
//             }
//         }
//     }
// }

// /* Divider Center V4 :before; */
// .divider-v4 {
//     &.divider-v4-center-double {
//         .divider-v4-title {
//             &:before {
//                 @include position(absolute, $bottom: -15px, $left: 50%);
//                 @include size(11%, 1px);
//                 margin-left: -7%;
//             }
//         }
//     }
// }

// /* Divider Left V4 */
// .divider-v4 {
//     &.divider-v4-left-single,
//     &.divider-v4-left-double {
//         .divider-v4-title {
//             &:after {
//                 @include position(absolute, $bottom: -10px, $left: 0);
//                 @include size(15%, 1px);
//             }

//             &:after,
//             &:before {
//                 background: $color-dark;
//                 content: " ";
//             }
//         }
//     }
// }

// /* White Divider Left V4 */
// .divider-v4-white {
//     &.divider-v4-left-single,
//     &.divider-v4-left-double {
//         .divider-v4-title {
//             &:before,
//             &:after {
//                 background: $color-white;
//             }
//         }
//     }
// }

// /* Divider V4 Left Double :before */
// .divider-v4 {
//     &.divider-v4-left-double {
//         .divider-v4-title {
//             &:before {
//                 @include position(absolute, $bottom: -15px, $left: 0);
//                 @include size(10%, 1px);
//             }
//         }
//     }
// }

// /* Divider Right V4 */
// .divider-v4 {
//     &.divider-v4-right-single,
//     &.divider-v4-right-double {
//         .divider-v4-title {
//             &:after {
//                 @include position(absolute, $bottom: -10px, $right: 0);
//                 @include size(15%, 1px);
//             }

//             &:after,
//             &:before {
//                 background: $color-dark;
//                 content: " ";
//             }
//         }
//     }
// }

// /* White Divider Right V4 */
// .divider-v4-white {
//     &.divider-v4-right-single,
//     &.divider-v4-right-double {
//         .divider-v4-title {
//             &:before,
//             &:after {
//                 background: $color-white;
//             }
//         }
//     }
// }


// /* Tittle Divider V4 Right Double Before */
// .divider-v4 {
//     &.divider-v4-right-double {
//         .divider-v4-title {
//             &:before {
//                 @include position(absolute, $bottom: -15px, $right: 0);
//                 @include size(10%, 1px);
//             }
//         }
//     }
// }

// /* White Version */
// .divider-v4-white {
//     .divider-v4-title,
//     .divider-v4-text {
//         color: $color-white;
//     }
// }

// /*------------------------------------------------------------------
//     [Divider v5]
// ------------------------------------------------------------------*/

// .divider-v5 {
//     overflow: hidden;

//     .divider-v5-title {
//         font-size: $font-size-22;
//         margin: 0 0 10px;
//     }

//     .divider-v5-element {
//         position: relative;
//         display: inline-block;

//         .divider-v5-element-icon {
//             @include position(relative, $top: -1px);
//             font-size: 18px;
//         }
//     }
// }

// /* Divider Center Element V5 */
// .divider-v5 {
//     .divider-v5-element-center {
//         &:before,
//         &:after {
//             @include position(absolute, $top: 8px);
//             @include size(50px, 1px);
//             background: $color-grey;
//             content: " ";
//         }

//         &:before {
//             right: 100%;
//             margin-right: 10px;
//         }

//         &:after {
//             left: 100%;
//             margin-left: 10px;
//         }
//     }
// }

// /* Divider Center Element Wrap V5 */
// .divider-v5 {
//     .center-wrap {
//         &:before,
//         &:after {
//             @include size(2000px, 1px);
//         }
//     }
// }

// /* Divider Center Element Dashed V5 */
// .divider-v5 {
//     .divider-v5-element-center-dashed {
//         &:before,
//         &:after {
//             @include position(absolute, $top: 8px);
//             @include size(50px, 1px);
//             border-top-style: dashed;
//             border-top-width: 2px;
//             border-color: lighten($color-grey, 15%);
//             content: " ";
//         }

//         &:before {
//             right: 100%;
//             margin-right: 10px;
//         }

//         &:after {
//             left: 100%;
//             margin-left: 10px;
//         }
//     }
// }

// /* Divider Center Element Dotted V5 */
// .divider-v5 {
//     .divider-v5-element-center-dotted {
//         &:before,
//         &:after {
//             @include position(absolute, $top: 8px);
//             @include size(50px, 1px);
//             border-top-style: dotted;
//             border-top-width: 2px;
//             border-color: lighten($color-grey, 15%);
//             content: " ";
//         }

//         &:before {
//             right: 100%;
//             margin-right: 10px;
//         }

//         &:after {
//             left: 100%;
//             margin-left: 10px;
//         }
//     }
// }

// /* Divider Left Element V5 */
// .divider-v5 {
//     .divider-v5-element-left {
//         &:after {
//             @include position(absolute, $top: 8px);
//             @include size(50px, 1px);
//             background: $color-grey;
//             content: " ";
//         }

//         &:after {
//             left: 100%;
//             margin-left: 10px;
//         }
//     }
// }

// /* Divider Left Element Wrap V5 */
// .divider-v5 {
//     .left-wrap {
//         &:after {
//             @include size(2000px, 1px);
//         }
//     }
// }

// /* Divider Left Element Dashed V5 */
// .divider-v5 {
//     .divider-v5-element-left-dashed {
//         &:after {
//             @include position(absolute, $top: 8px);
//             @include size(50px, 1px);
//             border-top-style: dashed;
//             border-top-width: 2px;
//             border-color: lighten($color-grey, 15%);
//             content: " ";
//         }

//         &:after {
//             left: 100%;
//             margin-left: 10px;
//         }
//     }
// }

// /* Divider Left Element Dotted V5 */
// .divider-v5 {
//     .divider-v5-element-left-dotted {
//         &:after {
//             @include position(absolute, $top: 8px);
//             @include size(50px, 1px);
//             border-top-style: dotted;
//             border-top-width: 2px;
//             border-color: lighten($color-grey, 15%);
//             content: " ";
//         }

//         &:after {
//             left: 100%;
//             margin-left: 10px;
//         }
//     }
// }

// /* Divider Right Element V5*/
// .divider-v5 {
//     .divider-v5-element-right {
//         &:before {
//             @include position(absolute, $top: 8px);
//             @include size(50px, 1px);
//             background: $color-grey;
//             content: " ";
//         }

//         &:before {
//             right: 100%;
//             margin-right: 10px;
//         }
//     }
// }

// /* Divider Right Element Wrap V5*/
// .divider-v5 {
//     .right-wrap {
//         &:before {
//             @include size(2000px, 1px);
//         }
//     }
// }

// /* Divider Right Element Dashed V5*/
// .divider-v5 {
//     .divider-v5-element-right-dashed {
//         &:before {
//             @include position(absolute, $top: 8px);
//             @include size(50px, 1px);
//             border-top-style: dashed;
//             border-top-width: 2px;
//             border-color: lighten($color-grey, 15%);
//             content: " ";
//         }

//         &:before {
//             right: 100%;
//             margin-right: 10px;
//         }
//     }
// }

// /* Divider Right Element Dotted V5*/
// .divider-v5 {
//     .divider-v5-element-right-dotted {
//         &:before {
//             @include position(absolute, $top: 8px);
//             @include size(50px, 1px);
//             border-top-style: dotted;
//             border-top-width: 2px;
//             border-color: lighten($color-grey, 15%);
//             content: " ";
//         }

//         &:before {
//             right: 100%;
//             margin-right: 10px;
//         }
//     }
// }

// /* White Version */
// .divider-v5-white {
//     .divider-v5-title,
//     .divider-v5-element,
//     .divider-v5-text {
//         color: $color-white;
//     }

//     .divider-v5-element {
//         &:before,
//         &:after {
//             border-bottom-color: $color-white;
//         }
//     }
// }


// /*------------------------------------------------------------------
//     [Divider v6]
// ------------------------------------------------------------------*/

// .divider-v6 {
//     overflow: hidden;

//     .divider-v6-element {
//         position: relative;
//         display: inline-block;
//     }

//     .divider-v6-element-title {
//         font-size: 22px;
//         padding: 5px 15px;
//         margin-bottom: 20px;
//     }
// }

// /* Divider Center Element V6 */
// .divider-v6 {
//     .divider-v6-element-center {
//         &:before,
//         &:after {
//             @include position(absolute, $top: 20px);
//             @include size(2000px, 1px);
//             background: lighten($color-grey, 20%);
//             content: " ";
//         }

//         &:before {
//             right: 100%;
//         }

//         &:after {
//             left: 100%;
//         }
//     }
// }

// /* Divider Left Element V6 */
// .divider-v6 {
//     .divider-v6-element-left {
//         .divider-v6-element-title {
//             padding-left: 0;
//         }

//         &:after {
//             @include position(absolute, $top: 20px);
//             @include size(2000px, 1px);
//             background: lighten($color-grey, 20%);
//             content: " ";
//         }

//         &:after {
//             left: 100%;
//         }
//     }
// }

// /* Divider Right Element V6 */
// .divider-v6 {
//     .divider-v6-element-right {
//         .divider-v6-element-title {
//             padding-right: 0;
//         }

//         &:before {
//             @include position(absolute, $top: 20px);
//             @include size(2000px, 1px);
//             background: lighten($color-grey, 20%);
//             content: " ";
//         }

//         &:before {
//             right: 100%;
//         }
//     }
// }

// /* Divider Element Title Border V6 */
// .divider-v6 {
//     .divider-v6-element-title {
//         &.divider-v6-element-title-brd {
//             border: 1px solid lighten($color-grey, 20%);
//             padding: 5px 15px;
//             margin-bottom: 30px;
//         }
//     }
// }

// /* White Version */
// .divider-v6-white {
//     .divider-v6-element-title,
//     .divider-v6-text {
//         color: $color-white;
//     }

//     .divider-v6-element-title-brd {
//         border-color: $color-sky-light;
//     }

//     .divider-v6-element {
//         &:before,
//         &:after {
//             border-bottom-color: $color-white;
//         }
//     }
// }


// /*------------------------------------------------------------------
//     [Divider v7]
// ------------------------------------------------------------------*/

// .divider-v7 {
//     text-align: center;

//     .divider-v7-title {
//         position: relative;
//         font-size: $font-size-22;
//         margin-bottom: 30px;

//         &:after {
//             @include position(absolute, $bottom: -14px, $left: 35%);
//             width: 30%;
//             border-top-width: 2px;
//             border-color: lighten($color-grey, 15%);
//             content: " ";
//         }
//     }
// }

// /* Divider Title Dashed V7 */
// .divider-v7 {
//     .divider-v7-title-dashed {
//         &:after {
//             border-top-style: dashed;
//         }
//     }
// }

// /* Divider Title Dotted V7 */
// .divider-v7 {
//     .divider-v7-title-dotted {
//         &:after {
//             border-top-style: dotted;
//             border-color: $color-gold;
//         }
//     }
// }


/*------------------------------------------------------------------
    [:before, :after Divider Bold]
—----------------------------------------------------------------*/

/* :before, :after Divider Bold */
.before-after-brd-bold {
    &:before,
    &:after {
        height: 2px !important;
    }
}

